<template>
    <div class="operation">
        <v-btn v-if="config.backwardBtn.visible" prepend-icon="mdi-backburger" @click="backwardClickListener">返回</v-btn>
        <v-btn v-if="config.addBtn.visible" prepend-icon="mdi-plus-box" color="green" @click="addClickListener">添加</v-btn>
        <v-btn v-if="config.batchImportBtn.visible" prepend-icon="mdi-file-multiple" color="blue" @click="importClickListener">批量导入</v-btn>
        <!-- <v-btn prepend-icon="mdi-update" color="teal" @click="showSaveOrUpdateWordDialog('update')">修改</v-btn> -->
        <!-- <v-btn prepend-icon="mdi-trash-can" disabled="true" color="red">删除</v-btn> -->
        <v-btn v-if="config.batchDeleteBtn.visible" prepend-icon="mdi-delete-sweep" :disabled="true" color="red-accent-4">批量删除</v-btn>
        <v-btn v-if="config.searchBtn.visible" prepend-icon="mdi-magnify" color="purple" @click="filterListener">条件搜索</v-btn>
        <!-- <v-text-field v-model="searchText" @keydown.enter="searchLisener" append-inner-icon="mdi-magnify" label="搜索单词" @click:append-inner="searchLisener"/> -->
    </div>
</template>

<script>
export default {
    components: {  },
    props: {
        backwardClickListener:{
            type:Function,
            default:()=>{}
        },
        addClickListener:{
            type:Function,
            default:()=>{}
        },
        searchLisener:{
            type:Function,
            default:()=>{}
        },
        filterListener:{
            type:Function,
            default:()=>{}
        },
        importClickListener:{
            type:Function,
            default:()=>{}
        },
        readonly:{type:Boolean,default:false},
        config:{
            default:{
                backwardBtn:{visible:false},
                addBtn:{visible:true},
                batchImportBtn:{visible:true},
                batchDeleteBtn:{visible:true},
                searchBtn:{visible:true},
            }
        }
    },
    data() {
        return {
            searchText:undefined
        }
    },
    created() {

    },
    methods: {
    },
}
</script>

<style scoped>
.operation {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}

.operation button {
    margin: 0 5px;
}
</style>